<template>
    <div class="action-modal">
        <Modal
            v-model="showDeployMdal"
            title="部署设置"
            @on-ok="handleDeployMdal"
            @on-cancel="cancelDeployMdal"
        >
            <Form :model="formLeft" label-position="right" :label-width="100">
                <FormItem label="版本：">
                    <Input v-model="formLeft.input1" />
                </FormItem>
                <FormItem label="部署方式：">
                    <Input v-model="formLeft.input2" />
                </FormItem>
                <FormItem label="永久运行：">
                    <ISwitch>
                        <span slot="open">是</span>
                        <span slot="close">否</span>
                    </ISwitch>
                </FormItem>
            </Form>
        </Modal>
        <Modal
            v-model="showEditModal"
            title="编辑流程"
            @on-ok="handleShowEditModal"
            @on-cancel="cancelShowEditModal"
        >
            <Form :model="formLeft" label-position="right" :label-width="100">
                <FormItem label="名称：">
                    <Input v-model="formLeft.input1" />
                </FormItem>
                <FormItem label="类别：">
                    <Input v-model="formLeft.input2" />
                </FormItem>
                <FormItem label="备注：">
                    <Input v-model="formLeft.input3" />
                </FormItem>
                <FormItem label="标签：">
                    <Poptip placement="bottom">
                        <Button type="dashed" style="font-size: 12px;color: #515a6e;border">
                            <Icon type="ios-add" />
                            <span style="margin-left: 4px;">添加标签</span>
                        </Button>
                        <div class="api" slot="content">
                            <Input v-model="formLeft.input4" style="width:160px" />
                            <Button type="default">
                                <Icon type="md-checkmark" />
                            </Button>
                        </div>
                    </Poptip>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script lang="ts">
import { Vue, Component, PropSync } from "vue-property-decorator";
import { SucInput } from "@suc/ui";

@Component({
    components: {
        SucInput
    }
})
export default class ActionModal extends Vue {
    @PropSync("deployMdal", { type: Boolean }) showDeployMdal!: boolean;
    @PropSync("editModal", { type: Boolean }) showEditModal!: boolean;
    formLeft = {
        input1: "",
        input2: "",
        input3: "",
        input4: ""
    };
    switch1 = false;
    change() {}
    // 部署框
    handleDeployMdal() {
        this.showDeployMdal = false;
        this.$Message.info("Clicked OK");
    }
    cancelDeployMdal() {
        this.showDeployMdal = false;
    }

    // 编辑框
    handleShowEditModal() {
        this.showEditModal = false;
        this.$Message.info("Clicked OK");
    }
    cancelShowEditModal() {
        this.showEditModal = false;
    }
}
</script>